<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="list"></ul>
  <script>
    var arr = [
      {"name":"小明","age":12,"sex":"男"},
      {"name":"小红","age":11,"sex":"女"},
      {"name":"小强","age":13,"sex":"男"},
    ]

    var list = document.getElementById('list');

    //遍历arr数组，每遍历一项，就以字符串的视角将HTML字符串添加到list中
    for(let i = 0;i < arr.length; i++){
      list.innerHTML += `
        <li>
          <div class="hd">${arr[i].name}</div>
          <div class="bd">
            <p>姓名：${arr[i].name}</p>
            <p>年龄：${arr[i].age}</p>
            <p>性别：${arr[i].sex}</p>
          </div>
        </li>
      `
    }

    
  </script>
</body>
</html>